<template>
  <div class='add-art'>
    <el-form :model="articleForm" :rules="rules" ref="articleForm" label-width="100px">
      <el-form-item label="文章标题:" prop="title">
        <el-input v-model="articleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <quill-editor v-model="articleForm.articleBody" style="height: 300px; margin-bottom: 50px;"  :options="editorOption" />
      </el-form-item>
      <el-form-item label="视频地址">
        <el-input placeholder="请输入视频地址"  v-model="articleForm.videoURL"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">确认</el-button>
        <el-button @click="$emit('close')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
import { add, detail, update } from '@/api/hmmm/articles'
export default {
  props: {
    // 接收从复组件中传入的公司编号
    articleId: {
      type: [String, Number], // 这个属性可以是字符串，也可以是Number
      required: false // 这个属性并不是必须的
    }
  },
  data () {
    return {
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 3, max: 999, message: '长度在 3 个字符以上', trigger: 'blur' }
        ]
      },
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    }
  },
  components: {
    quillEditor
  },
  methods: {
    // 添加或修改
    submitForm () {
      this.$refs.articleForm.validate(valid => {
        if (valid) {
          if (this.articleId) {
            this.articleForm.id = this.articleId
            this.doUpdate(this.articleForm)
          } else {
            this.doAdd(this.articleForm)
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },
    // 修改
    doUpdate (data) {
      update(data).then(response => {
        this.$message.success('修改成功')
        this.emit()
      }).catch(error => {
        console.log(error)
        this.$message.error('修改失败')
      })
    },
    // 添加
    doAdd (data) {
      add(data).then(response => {
        this.$message.success('添加成功')
        this.emit()
      }).catch(error => {
        console.log(error)
        this.$message.error('添加失败')
      })
    },
    emit () {
      this.$listeners.close && this.$emit('close')
      this.$listeners.refresh && this.$emit('refresh')
    },
    // 查询详情
    doQuery (id) {
      detail({ id: id }).then(response => {
        this.articleForm = response.data
      }).catch(error => {
        console.log(error)
        this.$message.error('查询失败!')
      })
    }
  },
  created () {
    if (this.articleId) {
      this.doQuery(this.articleId)
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang='scss'>
</style>
